<template>
  <div class="goods">
    <content-header >商品管理</content-header>
    <div class="container">
      <div class="body">
        <a-tabs :default-active-key="type" class="tabs" @change="tabsChange">
          <a-tab-pane key="1">
            <span slot="tab"><a-icon type="account-book" />出售中的商品</span>
          </a-tab-pane>
          <a-tab-pane key="2">
            <span slot="tab"><a-icon type="hdd" />仓库中的商品</span>
          </a-tab-pane>
          <a-tab-pane key="3">
            <span slot="tab"><a-icon type="delete" />回收站中的商品</span>
          </a-tab-pane>
        </a-tabs>
        <productListcontent :type="type"></productListcontent>
      </div>
    </div>
  </div>
</template>

<script>
import contentHeader from 'components/common/content-header'
import productListcontent from 'components/productListcontent'
export default {
  components:{
    contentHeader,
    productListcontent
  },
  data() {
    return {
      type:"1"
    }
  },
  created() {
  },
  methods: {
    tabsChange(e){
      this.type = e
    }
  },
}
</script>

<style scoped>
  .goods .container{
    width: calc(100% - 32px);
    margin: 16px auto;
    background-color: #ffffff;
  }
  .goods .container .body{
    padding: 16px;
  }
  .goods .tabs{
    background-color: #ffffff;
  }
</style>